<template>
  <mu-container class="button-wrappers">
    <div style="text-align: center;">
      <img class="logo" :src="webInfo.logoUrl" style="width: 20%;">
    </div>
    <div class="title">
      {{webInfo.webName}}
    </div>

    <mu-form ref="form" :model="validateForm" class="mu-demo-form">
      <mu-row style="padding:0 30px">
        <mu-col span="2">
          <img style="width: 30px;height:30px;" src="../assets/phone.png" alt="">
        </mu-col>
        <mu-col span="10">
          <mu-form-item prop="mobile" :rules="phoneRules" ref="phoneRules">
            <mu-text-field placeholder="手机号" :error-text="errorText" v-model="validateForm.mobile" prop="mobile"></mu-text-field>
          </mu-form-item>
        </mu-col>
      </mu-row>

      <mu-row style="padding:0 30px">
        <mu-col span="2">
          <img style="width: 30px;height:30px;" src="../assets/pwd.png" alt="">
        </mu-col>
        <mu-col span="10">
          <mu-form-item prop="captcha" :rules="captchaRules">
            <mu-text-field placeholder="验证码" v-model="validateForm.captcha" prop="captcha">
            </mu-text-field>
          </mu-form-item>
          <mu-button flat color="primary" :disabled='disabled' style="position: absolute;top: -4px;right: 0;"
            @click="sendcode">{{text}}</mu-button>
        </mu-col>
      </mu-row>
      <mu-row style="padding:0 20px">
        <mu-button style="height:48px;font-size:24px;margin-top: 20px;" round color="#ed6214" full-width
          @click="submit">确 定</mu-button>
      </mu-row>
    </mu-form>
  </mu-container>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios';
  import Qs from 'qs';
  import Order from '@/views/order'
  export default {
    name: 'Login',
    data() {
      return {
        webInfo:webInfo,
        form: {},
        phoneRules: [{
            validate: (val) => !!val,
            message: '必须填写手机号'
          },
          {
            validate: (val) => (/^1[345789]\d{9}$/.test(val)),
            message: '手机号格式错误！'
          },
        ],
        captchaRules: [{
          validate: (val) => !!val,
          message: '必须填写验证码'
        }],
        validateForm: {
          mobile: '',
          captcha: '',
          openid: ''
        },
        disabled: false,
        text: '发送验证码',
        errorText: '',
        isbind: false,
      }
    },
    methods: {
      sendcode: function () {
        let that = this;
        if (!!this.validateForm.mobile) {

            let reg = /^1[35789]\d{9}$/;
            if(!reg.test(this.validateForm.mobile)) return 
            
            this.settime();
            let mobile = Qs.stringify({
                mobile: this.validateForm.mobile
            })
            axios.post('/bhtong/commonreq/sendcaptcha.json', mobile).then(function (data, res) {
                if (data.data.code === 'v') {
                that.$toast.success(data.data.msg);
                } else {
                that.$toast.fail(data.data.msg);
                }
            })
        } else {
          that.$toast.fail('请填写手机号');
        }

      },
      settime: function () {
        let that = this;
        this.text = 60;
        this.disabled = true;
        var interval = setInterval(function () {
          that.text--;
          if (that.text == 0) {
            that.disabled = false;
            that.text = '发送验证码'
            clearInterval(interval);
          }
          return that.text;
        }, 1000)
      },
      // changeMobile: function (e) {
      //   let that = this;
      //   let mobile = Qs.stringify({
      //     mobile: this.validateForm.mobile
      //   })
      //   axios.post('/bhtong/wechart/wxusermg/ismobilebind.json', mobile).then(function (data) {
      //     if (data.isbind === '1') {
      //       that.errorText = '该手机已绑定,请输入其他手机号进行注册';
      //       that.validateForm.mobile = '';
      //     } else {
      //       that.errorText = ''
      //     }
      //   })
      // },
      submit() {
        let that = this;

        this.$refs.form.validate().then((result) => {

          if (result) {

            let validateForm = {};
            that.validateForm.openid = that.$store.state.openid;
            validateForm = Qs.stringify(that.validateForm)
  
            axios.post('/bhtong/wechart/wxusermg/wxmclogin.json', validateForm).then(function (data, res) {
              if (data.data.code === 'v') {
                that.$toast.success(data.data.msg);
                that.toPath({
                  path: '/order'
                })
              } else {
                that.$notify(data.data.msg);
              }
            })
          }
        });
      }
    },
    mounted() {
      this.GetOpenID(res => {
          this.validateForm.openid = res.openid;
          this.toPath({
              path: '/' + res.enterUrl
          });
      });
      var link = document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = webInfo.iconUrl;
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
</script>

<style lang="less">
  .button-wrappers {
    background: url('../assets/background.png');
    background-size: cover;
    height: 100%;

    .logo {
      margin-top: 70px;
    }

    .title {
      font-size: 45px;
      color: rgb(237, 98, 20);
      text-align: center;
      margin-top: 20px;
      margin-bottom: 30px;
    }

    .mu-form-item .mu-input {
      background: none;
    }

    .mu-text-field-input {
      background: none;
      font-size: 16px;
    }
  }
</style>
